<template>
  <!--表单组件-->
  <el-dialog :close-on-click-modal="false" :before-close="handleBeforeClose"
    :visible=true :title="title" width="85%">

    <el-form ref="form" :model="form" size="small" label-width="200px">
      <el-table :data="tableData">
        <el-table-column prop="parameter" label="训练参数" width="100px"/>
        <el-table-column label="训练前" width="60px">
          <template #default="scope">
            <el-input v-model="scope.row.xlq" />
          </template>
        </el-table-column>
        <el-table-column label="7500">
          <el-table-column label="即刻" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xljk" />
            </template>
          </el-table-column>
          <el-table-column label="20"  width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl20" />
            </template>
          </el-table-column>
          <el-table-column label="40"  width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl40" />
            </template>
          </el-table-column>
          <el-table-column label="60"  width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl60" />
            </template>
          </el-table-column>
          <el-table-column label="80"  width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl80" />
            </template>
          </el-table-column>
          <el-table-column label="100"  width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl100" />
            </template>
          </el-table-column>
          <el-table-column label="2min" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl120" />
            </template>
          </el-table-column>
          <el-table-column label="140" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl140" />
            </template>
          </el-table-column>
          <el-table-column label="160" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl160" />
            </template>
          </el-table-column>
          <el-table-column label="3min" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl180" />
            </template>
          </el-table-column>
          <el-table-column label="200" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl200" />
            </template>
          </el-table-column>
          <el-table-column label="220" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl220" />
            </template>
          </el-table-column>
          <el-table-column label="4min" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl240" />
            </template>
          </el-table-column>
          <el-table-column label="260" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl260" />
            </template>
          </el-table-column>
          <el-table-column label="280" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl280" />
            </template>
          </el-table-column>
          <el-table-column label="5min" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl300" />
            </template>
          </el-table-column>
          <el-table-column label="320" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl320" />
            </template>
          </el-table-column>
          <el-table-column label="340" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl340" />
            </template>
          </el-table-column>
          <el-table-column label="6min" width="60px">
            <template #default="scope">
              <el-input  v-model="scope.row.xl360" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="训练后" width="60px">
          <template #default="scope">
              <el-input v-model="scope.row.xlh" />
            </template>
        </el-table-column>
      </el-table>
      <el-row :span="24">
      <el-form-item label="主观症状">
        <el-select
          v-model="selectedFeels"
          placeholder="请选择"
          multiple
          filterable
          clearable
          style="width: 100%;"
        >
          <el-option
            v-for="feel in feelList"
            :key="feel.name"
            :label="feel.name"
            :value="feel.id"
          />
        </el-select>
      </el-form-item>
      </el-row>

      <el-form-item label="其他症状">
        <el-input type="textarea" v-model="otherFeel" />
      </el-form-item>

      <el-form-item label="书写表现">
        <el-input type="textarea" v-model="form.sxbx" />
      </el-form-item>

      <el-form-item label="医师建议">
        <el-input type="textarea" v-model="form.jy"/>
      </el-form-item>

      <el-row>
        <el-col :span="6" >
          <el-form-item label="结果判定">
            <el-select
              v-model="form.result"
              placeholder="请选择">
              <el-option
                v-for="[key, value] in resultOptions"
                :key="value"
                :label="value"
                :value="key"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" >
          <el-form-item label="记录人" prop="createBy">
            <el-input v-model="form.createBy" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="记录日期" prop="createTime">
            <el-date-picker v-model="form.createTime" :picker-options="pickerOptions" type="date" disabled/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleCommit" :disabled="disabled">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import {get, edit, add} from '@/api/trainQyty'
import { table2Form, form2Table } from '@/utils/table';
import { mapGetters, mapActions } from 'vuex'

import { RATE_RESULTS} from '@/utils/constants'

export default {
  name: 'Dycgksldialog',
  props: {
    trainId: {
      type: Number,
      default: -1,
      required: true
    },
    itemId: {
      type: Number,
      default: -1,
      required: true
    }
  },
  computed: {
    disabled() {
      return this.form.id != null && !this.checkPer(['admin']);
    },
    ...mapGetters('feel', ['feelList'])
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }]
      },
      form: { id: null, trainId: null, xlq: null, xljk: null, xl20: null, xl40: null,
        xl60: null, xl80: null, xl100: null, xl120: null, xl140: null, xl160: null, xl180: null,
        xl200: null, xl220: null, xl240: null, xl260: null, xl280: null, xl300: null, xl320: null,
        xl340: null, xl360: null, xlh: null, feels: null, sxbx: null, result: null, jy: null, 
        createTime: null, createBy: null, trainItemId: null 
      },
      title: '缺氧体验',
      resultOptions: RATE_RESULTS,
      tableData: [
        { parameter: '血氧饱和度%', xlq: "", xljk: "", xl20: "", xl40: "", xl60: "", xl80: "", xl100: "", 
          xl120: "", xl140: "", xl160: "", xl180: "", xl200: "", xl220: "", xl240: "", xl260: "",
          xl280: "", xl300: "", xl320: null, xl340: null, xl360: null, xlh: ""},
        { parameter: '心率(次/分)', xlq: "", xljk: "", xl20: "", xl40: "", xl60: "", xl80: "", xl100: "", 
          xl120: "", xl140: "", xl160: "", xl180: "", xl200: "", xl220: "", xl240: "", xl260: "",
          xl280: "", xl300: "", xl320: null, xl340: null, xl360: null, xlh: ""},

        { parameter: '呼吸(次/分)', xlq: "", xljk: "", xl20: "", xl40: "", xl60: "", xl80: "", xl100: "", 
          xl120: "", xl140: "", xl160: "", xl180: "", xl200: "", xl220: "", xl240: "", xl260: "",
          xl280: "", xl300: "",  xl320: null, xl340: null, xl360: null, xlh: ""},
        { parameter: '血压(mmHg)', xlq: "", xljk: "", xl20: "", xl40: "", xl60: "", xl80: "", xl100: "", 
          xl120: "", xl140: "", xl160: "", xl180: "", xl200: "", xl220: "", xl240: "", xl260: "",
          xl280: "", xl300: "", xl320: null, xl340: null, xl360: null, xlh: ""},
      ],
      isLoading: false,
      selectedFeels: [],
      otherFeel: ''
    };
  },
  methods: {
    ...mapActions('feel', ['getFeelList']),
    handleBeforeClose(done) {
      this.$emit('close', this.itemId);
      if (done) {
        done(); // 调用done()来关闭对话框        
      }
    },
    handleCommit() {
      this.form.feels = this.selectedFeels.join('|') + '|' + this.otherFeel;
      table2Form(this.tableData, this.form,'xl')

      this.$refs['form'].validate(valid => {
        if (valid) {
          this.isLoading = true; // 提交按钮的加载状态
          this.form.trainId = this.trainId;
          this.form.trainItemId = this.itemId;
          if (this.form.id == null) {
            add(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          } else {
            edit(this.form).then(() => {
              this.$emit('close', this.itemId);
              this.isLoading = false;
            }).catch(() => {
              this.isLoading = false;
            });
          }
        }
      })
    },
    handleCancel() {
      this.$emit('cancel', this.itemId);
    }
  },
  created() {
    if (this.trainId !== -1) {
      // 使用 Vuex 获取感受列表
      this.getFeelList({current: 1, size: 100})
      
      get(this.trainId, this.itemId).then(response => {
        this.form = Object.assign(this.form, response);
        const feels = this.form.feels.split('|');
        if (feels.length > 1) {
          this.selectedFeels = feels.slice(0, -1).map(id => parseInt(id))
          console.log(this.selectedFeels);
          this.otherFeel = feels[feels.length - 1]
        }

        form2Table(this.form, this.tableData,'xl')
      });
    }
  },
  updated() {

    // 组件更新后执行的逻辑，比如获取数据
  },
  mounted() {
  }
}
</script>

<style scoped>

/* ::v-deep .el-table th.el-table__cell>.cell {
  text-align: center;
}
::v-deep .el-input__inner {
  text-align: center;
  padding: 0;
}
  */
::v-deep .el-table--small .el-table__cell {
  padding: 0;
}
.el-table {
  margin-bottom: 20px;
}
::v-deep .el-table .cell {
  padding: 0;
}
</style>